
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>鼠标移入移出显示或隐藏的悬浮事件</title>
	<style>
	div{
		width: 200px;
		height: 100px;
		background:#ccc;
		border:1px solid #000;
		display:none;
	}
	</style>
</head>
<body>
	<button id="btn">移动鼠标到按钮会有盒子显示或隐藏</button>
	<div id="box"></div>
</body>
</html>
<script>
	//1.获取标签元素
	var oBtn=document.getElementById('btn');
	var oBox=document.getElementById('box');
 
	//2.书写事件
	oBtn.onmouseover=function(){
		//alert('ok');
        console.log('鼠标移入');
		oBox.style.display='block';
	}
	oBtn.onmouseout=function(){
        console.log('鼠标移除');
		oBox.style.display='none';
	}
</script>